<template>
    <div class="carousel-container">
      <div class="carousel" :style="carouselStyle">
        <div 
          class="carousel-item" 
          v-for="_new in news" 
          :key="_new.newid"
        >
          <a href=""><img :src="_new.imageName" :alt="_new.title" /></a>
          <div class="carousel-caption">
            <a href=""><h3>{{ _new.title }}</h3></a>
            <a href=""><p>{{ _new.content }}</p></a>
          </div>
        </div>
      </div>
      <div class="carousel-controls">
        <button class="prev" @click="prevSlide">&lt;</button>
        <button class="next" @click="nextSlide">&gt;</button>
      </div>
    </div>
    <br>
  </template>
  
  <script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios'

// 定义轮播图项
// 定义响应式数据
const news = ref([])       
const errorMessage = ref('')  

const fetchNews = async () => {
    try {
        const response = await axios.get('http://localhost:3001/getNews')
        news.value = response.data
        errorMessage.value = ''  // 清空错误信息
    } catch (error) {
        console.error('获取数据时发生错误:', error)
        errorMessage.value = '加载数据失败，请稍后再试。'
    }
}
  // 当前显示的索引
  const currentIndex = ref(0);
  
  // 切换到下一个轮播项
  const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % news.value.length;
  };
  
  // 切换到上一个轮播项
  const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + news.value.length) % news.value.length;
  };
  
  // 计算轮播图容器的样式
  const carouselStyle = computed(() => {
    return {
      transform: `translateX(-${currentIndex.value * 100}%)`,  // 控制轮播图滑动
      transition: 'transform 1s ease-in-out',  // 设置滑动动画效果
    };
  });
  
  // 自动切换功能
  onMounted(fetchNews)
  onMounted(() => {
    setInterval(nextSlide, 5000); // 每5秒自动切换
  });
  </script>
  
  <style scoped>
  a{
    color: inherit;
  }
  .carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px; /* 适应新闻列表的宽度 */
    margin: 20px auto;
    overflow: hidden;
  }
  
  .carousel {
    display: flex;
  }
  
  .carousel-item {
    min-width: 100%;
    position: relative;
  }
  
  .carousel-item img {
    width: 100%;
    height: 400px; /* 调整高度为适合新闻列表的尺寸 */
    object-fit: cover;
    filter: brightness(70%);
  }
  
  .carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }
  
  .carousel-caption h3 {
    font-size: 24px;
    font-weight: bold;
  }
  
  .carousel-caption p {
    font-size: 16px;
    max-width: 80%;
  }
  
  .carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
  }
  
  .carousel-controls button {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .carousel-controls button:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .carousel-controls .prev {
    margin-left: 20px;
  }
  
  .carousel-controls .next {
    margin-right: 20px;
  }
  h3:hover{
    color: red;
  }
  p:hover{
    color: red;
  }
  </style>